import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Modal, Button, Form, Input, Select, message } from 'antd';
import { editProduct } from '@/api/product/index';


const { Option } = Select;

const ProductEditModal = ({ visible, item, onClose, onSuccess }) => {
  const [form] = Form.useForm();
  const newItem = { ...item }


  useEffect(() => {

    // 监听编辑产品信息
    const handleEditProduct = () => {
      form.setFieldsValue({
        id: newItem.id,
        product_id: newItem.product_id,
        product_name: newItem.product_name,
        product_category: newItem.product_category,
        product_unit: newItem.product_unit,
        product_in_warehouse_number: newItem.product_in_warehouse_number,
        product_single_price: newItem.product_single_price,
        product_create_person: newItem.product_create_person,
        in_memo: newItem.in_memo
      });
    };
    handleEditProduct()
  }, [newItem]);

  const handleEdit = async (value) => {
    try {
      const res = await editProduct({ ...newItem, ...value });
      if (res.status === 0) {
        message.success('编辑产品信息成功');
        onSuccess();
        onClose();
      } else {
        message.error('编辑产品信息失败');
        onClose();
      }
    } catch (error) {
      message.error(error);
      onClose();
    }
  };

  return (
    <Modal
      title="编辑产品"
      open={visible}
      onCancel={onClose}
      footer={null}
      width="600px"
      centered
    >
      <div className="dialog-content">
        <Form
          form={form}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 16 }}
          layout="horizontal"
          initialValues={newItem}
          onFinish={handleEdit}
        >
          <Form.Item label="入库编号" name="product_id">
            <Input disabled />
          </Form.Item>
          <Form.Item label="产品名称" name="product_name" rules={[{ required: true, message: '请输入产品名称' }]}>
            <Input />
          </Form.Item>
          <Form.Item label="产品类别" name="product_category" rules={[{ required: true, message: '请选择产品类别' }]}>
            <Select placeholder="请选择产品类别" options={[
              {
                label: '食品类',
                value: '食品类'
              },
              {
                label: '水果类',
                value: '水果类'
              }
            ]}>
            </Select>
          </Form.Item>

          <Form.Item label="产品单位" name="product_unit" rules={[{ required: true, message: '请选择产品单位' }]}>
            <Select>
              <Option value="个">个</Option>
              <Option value="件">件</Option>
            </Select>
          </Form.Item>

          <Form.Item label="产品入库数量" name="product_in_warehouse_number" rules={[{ required: true, message: '请输入产品入库数量' }]}>
            <Input />
          </Form.Item>

          <Form.Item label="产品入库单价" name="product_single_price" rules={[{ required: true, message: '请输入产品入库单价' }]}>
            <Input />
          </Form.Item>

          <Form.Item label="入库操作人" name="product_create_person">
            <Input disabled />
          </Form.Item>

          <Form.Item label="入库备注" name="in_memo">
            <Input.TextArea rows={2} />
          </Form.Item>
          <Form.Item style={{ textAlign: 'right' }}>
            <Button
              type="primary"
              htmlType='submit'
            >
              确定
            </Button>
          </Form.Item>
        </Form>
      </div>
    </Modal>
  );
};

ProductEditModal.propTypes = {
  visible: PropTypes.bool.isRequired,
  item: PropTypes.object.isRequired,
  onClose: PropTypes.func.isRequired,
  onSuccess: PropTypes.func.isRequired,
};

export default ProductEditModal;
